<template>
  <a-card>
    <a-card style="width: 100%;">
      <a-image :src='pageitems.cover || bg' style="width: 100%;height: 360px;" :fallback="bg" />
    </a-card>
    <div v-html="pageitems.html"></div>
  </a-card>
  <br />
  <div class="pltitle">评论</div>
  <a-card>
    <template #extra>
      <a-button :disabled="value == ''" @click="tofabu">发布</a-button>
    </template>
    <discord-picker input :value="value" gif-format="md" @update:value="value = $event" @emoji="setEmoji" @gif="setGif" />
  </a-card>
  <br />
  <div class="pltitle">推荐阅读</div>
  <a-card v-for="item in recommendList" :key="item.id">
   <div @click="()=>handeltodetail(item.id)">
    <component :is="Articleitem" :item="item"></component>
   </div>
  </a-card>

  <a-modal v-model:visible="visible" title="登录" @ok="handleOk">
      <div>
        user: <input type="text" v-model="usernames">
      </div>
      <div>
        email: <input type="text" v-model="emails">
      </div>
  </a-modal>

  <component :is="Footer" ></component>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia"
import bg from "../assets/atm.jpeg"
import { useHomes } from "../store/home";
import { useDefault } from "../store/default"
import Articleitem from "../components/articleitem.vue"
import { ref, getCurrentInstance, ComponentInternalInstance, watch } from "vue";
import { useRoute, useRouter } from "vue-router"
import { message } from 'ant-design-vue';
import DiscordPicker from 'vue3-discordpicker'
import Footer from "../components/footer.vue"
let value = ref("");
let homes = useHomes();
let route = useRoute()
let defaults = useDefault()
homes.getArtitemall()
const { proxy } = getCurrentInstance() as ComponentInternalInstance
let recommendList = ref([] as any);
let { articleListall } = storeToRefs(homes);
let { pagerouter ,users} = storeToRefs(defaults)
let pageitems = ref({} as any);
let usernames = ref('');
let emails = ref('');




//获取页面信息
watch(pagerouter, (newval) => {
  console.log(newval,"page")
  pageitems.value = [...newval].find((v: any) => v.path == route.params.path)
  // console.log(pageitems.value)
})
watch(() => route.path, () => {
  location.reload()
})

watch(articleListall, (newval) => {

  newval.slice(0, 6).forEach((item: any, index: number) => {
    setTimeout(() => {
      recommendList.value.push(item)
      proxy!.$forceUpdate() // 通知 Vue 强制更新视图
    }, index * 800);
  })
})

// emoji
let setEmoji = (emoji: any) => {
  console.log(emoji, "emoji")
}
let setGif = (gif: any) => {
  console.log(gif, "gif")
}
let router = useRouter()
//跳转详情
const handeltodetail = (id:string) =>{
  router.push("/archives/" + id)
}

//登录弹框
const visible = ref<boolean>(false);

const showModal = () => {
  visible.value = true;
};

const handleOk = (e: MouseEvent) => {
  console.log(usernames.value,"usernames")
  console.log(emails.value,"emails")
  let tests = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if(!tests.test(emails.value)){
    return message.warning("邮箱验证不对")
  } 
  let obj = {
    user:usernames.value,
    email:emails.value
  }
  defaults.getusers(obj)
  // console.log(e);
  visible.value = false;
};
//点击发布
let tofabu = () => {
  //获取用户登录状态
  if(JSON.stringify(users.value)=="{}"){
    showModal()
  }
}
</script>

<style lang="scss">
.pltitle {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
</style>